<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>自定义表格</title>

    <style>
      .table{
        border: 1px solid #A2CCF9;
        border-radius: 4px;
        overflow: hidden;

        width: 375px;
        text-align: center;
      }

      .th,.tr{
        display: flex;
        justify-content: center;
      }

      .td{
        flex: 1;
        border-right: 1px solid #DAEEFF;
        border-bottom: 1px solid #DAEEFF;
      }

      .tr .td:last-child,.th .td:last-child{
        border-right: 0;
      }

      .tr:last-child .td{
        border-bottom: 0;
      }

      .th .td{
        color: white;
        background-color: #7FBDFF;
        padding: 8px 12px;
        font-size: 12px;
      }

      .tr .td{
        color: #393B40;
        background-color: #EFF9FF;
        padding: 8px 12px;
        font-size: 12px;
      }

      .th .td:first-child{
        width: 100px;
        flex: none;
      }

      .tr .td:first-child{
        width: 100px;
        flex: none;
      }
    </style>
  </head>

  <body>

    <div class="table">
      <div class="th">
        <div class="td">常规保障内容</div>
        <div class="td">身故(元)</div>
        <div class="td">全残(元)</div>
        <div class="td">医疗费(元)</div>
      </div>
      <div class="tr">
        <div class="td">特定意外伤害</div>
        <div class="td">50,000</div>
        <div class="td">50,000</div>
        <div class="td">/</div>
      </div>
      <div class="tr">
        <div class="td">特定医疗意外</div>
        <div class="td">50,000</div>
        <div class="td">50,000</div>
        <div class="td">/</div>
      </div>
      <div class="tr">
        <div class="td">医疗费用</div>
        <div class="td">50,000</div>
        <div class="td">50,000</div>
        <div class="td">/</div>
      </div>
    </div>
  </body>
</html>
